<template>
  <div class="detail">
      <div class="navBar" @touchmove.prevent>
      <navBar>
          <template v-slot:left>
            <div @click="leftClick">
                ←
            </div>
          </template>
          <template v-slot:center>
              <div class="flex f-a a-c">
              <div v-for="(n,index) in titles" :key="index"
                @click="navBarClick(index)"
                :class="{red:currentIndex==index}"
              >{{n}}</div>
              </div>    
          </template>
      </navBar>
      </div>
      <div class="scroll">
      <scroll
      @navBarScroll='navBarScroll'
      @isShowBT="isShowBT"
      :paramInfoOffsetTop='paramInfoOffsetTop'
      :paramInfoOffsetTopHeight='paramInfoOffsetTopHeight'
      :commentInfoOffsetTopHeight='commentInfoOffsetTopHeight'
      ref="scroll"
      >
      <div class="detailS" >
          <detailS :topImages='topImages' @imgLoad='imgLoad'></detailS>
      </div>
      <div>
         <detailBaseInfo :goods='goods'></detailBaseInfo>
      </div>
      <div class="shopInfo">
          <detailShopInfo :shop="shop"></detailShopInfo>
      </div>
      <div class="detailGoodsInfo" >
          <detailGoodsInfo :detailInfo='detailInfo' @imgLoad='imgLoad'></detailGoodsInfo>
      </div>
      <div class="detailParamInfo">
          <detailParamInfo :paramInfo='paramInfo' ref="detailParamInfo"></detailParamInfo>
      </div>
      <div class="detailCommentInfo">
          <detailCommentInfo :commentInfo='commentInfo' ref="detailCommentInfo"></detailCommentInfo>
      </div>
      
      <div class="goodsList">
          <goodsList :goods='recommends'></goodsList>
      </div>
      </scroll></div>
      <div
      class="backTop"
      @click="$refs.scroll.bs.scrollTo(0, 0, 500)"
      v-if="showBT"
    >
      ↑
    </div>
    <div class="detailBottomBar">
        <detailBottomBar @addToCart='addToCart' ></detailBottomBar>
    </div>
    <div class="success" v-if="isShowSuccess">
        {{message}}
    </div>
  </div>
</template>

<script>
import navBar from '@/components/common/navBar/navBar'
import detailBaseInfo from './detailBaseInfo.vue'
import detailShopInfo from './detailShopInfo.vue'
import detailGoodsInfo from './detailGoodsInfo.vue'
import detailParamInfo from './detailParamInfo.vue'
import detailCommentInfo from './detailCommentInfo.vue'
import goodsList from '@/components/content/goods/goodsList'
import detailBottomBar from './detailBottomBar.vue'
import {getDetail,getRecommend,Goods,Shop,GoodsParam} from '@/network/detail.js'
import detailS from './detailSwiper.vue'

import scroll from './scroll.vue'

import {debounce} from '@/assets/js/common.js'

import {mapActions} from 'vuex'

export default {
    name:'detail',

    created(){
       
        getDetail(this.$route.params.iid).then(res=>{
            this.$store.commit('showMainTabBar',false)
           const data=res.result
            this.topImages=data.itemInfo.topImages
            this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
            this.shop=new Shop(data.shopInfo)
            this.detailInfo=data.detailInfo
            this.paramInfo= new GoodsParam(data.itemParams.info,data.itemParams.rule)
            if(data.rate.cRate !== 0){
                this.commentInfo=data.rate.list[0]
            }
          
        })
        getRecommend().then(res=>{
            this.recommends=res.data.list
           
        })
        this.getTop=debounce(()=>{
            if(this.$refs.detailParamInfo&&this.$refs.detailCommentInfo){
            this.paramInfoOffsetTop=this.$refs.detailParamInfo.$el.offsetTop-44
            this.paramInfoOffsetTopHeight=this.$refs.detailParamInfo.$el.offsetTop-44+this.$refs.detailParamInfo.$el.offsetHeight
            this.commentInfoOffsetTopHeight=this.$refs.detailCommentInfo.$el.offsetTop-44+this.$refs.detailCommentInfo.$el.offsetHeight            
           }
            },100)
    },
    unmounted(){
        this.$store.commit('showMainTabBar',true)
    },
    updated(){
        
    },
    components:{
        navBar,detailS,detailBaseInfo,detailShopInfo,scroll,detailGoodsInfo,detailParamInfo,detailCommentInfo,goodsList,detailBottomBar
    },
    data(){
        return{
            titles:['商品','参数','评论','推荐'],
            currentIndex:0,
            
            topImages:null,
            
            showBT:false,

            getTop:null,

            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            paramInfoOffsetTop:null,
            paramInfoOffsetTopHeight:null,
            commentInfoOffsetTopHeight:null,
            commentInfo:{},
            recommends:[],
            message:'',
            isShowSuccess:false
        }
    },
    methods:{
        ...mapActions(['addCart']),
        navBarClick(index){
            this.currentIndex=index
            
            switch (index) {
                case 0:
                    this.$refs.scroll.bs.scrollTo(0, 0)
                    break;
                case 1:
                    this.$refs.scroll.bs.scrollTo(0, -(this.paramInfoOffsetTop))
                    break;
                case 2:
                    this.$refs.scroll.bs.scrollTo(0, -(this.paramInfoOffsetTopHeight))
                    break;
                case 3:
                    this.$refs.scroll.bs.scrollTo(0, -(this.commentInfoOffsetTopHeight))
                    break;
            
                default:
                    break;
            }
        },
        leftClick(){
            this.$router.go(-1)
        },
        imgLoad(){
            this.getTop()
           
        },
        navBarScroll(index){
            this.currentIndex=index
        },
        isShowBT(show) {
      this.showBT = show;
        },
        addToCart(){
            
            const product={}
            product.image=this.topImages[0]
            product.title=this.goods.title
            product.desc=this.goods.desc
            product.price=this.goods.realPrice
            product.iid=this.$route.params.iid
            
            // this.$store.dispatch('addCart',product).then(res=>{
            //     console.log(res)
            // })
             this.addCart(product).then(res=>{
                this.message=res
                this.isShowSuccess=true
                setTimeout(() => {
                    this.isShowSuccess=false
                }, 2000);
            })
        }
    }
}
</script>

<style scoped>
.detail{
    height: 100vh;
    overflow: hidden;
    box-shadow: 0 0px 1px rgb(128, 128, 128);
    position: relative;
    z-index: 99;
    background-color: #fff;
}
.navBar{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0 0 2px black;
}
.red{
    color: rgb(221, 15, 15);
}
.scroll{
    margin-top:44px ;
}
.detailGoodsInfo{
    margin-top: 30px;
    font-size:20px
}
.backTop {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
  color: chocolate;
  position: fixed;
  bottom: 80px;
  right: 0;
  border-radius: 50%;
  background-color: #fff;
}
.success{
    position: fixed;
    left: 50%;
    top: 50%;
    z-index:9999;
    color:#fff;
    background-color: rgba(0,0,0,.3);
    font-size: 30px;
    transform: translateX(-50%) translateY(-50%);
    white-space:nowrap;
    padding: 5px 10px;
    border-radius: 10px;
}
</style>